<template>
  <div>
    <button @click="fn1">去one-query</button>
    <button @click="fn2">去two-params</button>
    <button @click="$router.push('/three/jack/17')">去three-动态路由匹配</button>

    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    fn1 () {
      // 跳转到/one这个路径对应的路由
      // this.$router.push('/one')

      //   this.$router.push({
      //     path: '/one',
      //     query: {
      //         name: 'jack',
      //         age: 16
      //     }
      //   })

      // 建议用name
      this.$router.push({
        name: 'one',
        query: {
          name: 'jack',
          age: 16
        }
      })
    },

    fn2 () {
      // 跳转到two
      // params传参，跳转时只能用name，不能用path
      // 所以建议都用name，因为既支持query也支持params
      this.$router.push({
        name: 'two',
        params: {
          name: 'jack',
          age: 16
        }
      })
    }
  }
}
</script>

<style></style>
